<template>
    <div class="main-con mallSetting">
        <!-- 首页标题栏 -->
        <div class="main-title">
            商城通用设置
        </div>

        <!-- 表单信息 -->
        <div class="form-con">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="121px" class="demo-ruleForm">
                <h2 class="item-title">
                    订单相关
                </h2>
                <div class="form-item-con">
                    <el-form-item label="自动取消订单：" prop="cancelInterval">
                        <div class="form-item">
                            <div class="form-item-input" style="margin-left: 0px;">
                                <el-input size="small" v-model="ruleForm.cancelInterval"></el-input>
                            </div>
                            <div>分钟内未付款，自动取消订单</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="自动确认收货：" prop="autoTakeInterval">
                        <div class="form-item">
                            <div>骑手送达</div>
                            <div class="form-item-input">
                                <el-input size="small" v-model="ruleForm.autoTakeInterval"></el-input>
                            </div>
                            <div>小时后，自动确认收货</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="申请售后时间：" prop="afterSaleInterval">
                        <div class="form-item">
                            <div>订单已完成</div>
                            <div class="form-item-input">
                                <el-input size="small" v-model="ruleForm.afterSaleInterval"></el-input>
                            </div>
                            <div>天后，不能申请售后</div>
                        </div>
                    </el-form-item>
                </div>
                <h2 class="item-title">
                    商品相关
                </h2>
                <div class="form-item-con">
                    <el-form-item label="售罄是否展示：" required>
                        <el-radio-group v-model="ruleForm.isShow">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="submit-btn-con">
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import {
    queryMallSettingInfo,
    saveMallSettingInfo
} from "@/common/service/systemManagement/mallSetting.js";
export default {
    name: "mallSetting",
    data() {
        return {
            ruleForm: {
                cancelInterval: "",
                autoTakeInterval: "",
                afterSaleInterval: "",
                isShow: 1
            },
            rules: {
                cancelInterval: [
                    {
                        required: true,
                        message: "请输入自动取消订单时间",
                        trigger: "blur"
                    }
                ],
                autoTakeInterval: [
                    {
                        required: true,
                        message: "请输入自动确认收货时间",
                        trigger: "blur"
                    }
                ],
                afterSaleInterval: [
                    {
                        required: true,
                        message: "请输入申请售后时间时间",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        //初始化表格数据
        this._queryMallSettingInfo();
    },
    methods: {
        /*----------------------------查询操作----------------------------*/
        //查询操作记录信息表格数据
        _queryMallSettingInfo() {
            queryMallSettingInfo()
                .then(res => {
                    this.ruleForm.cancelInterval = res.cancelInterval;
                    this.ruleForm.autoTakeInterval = res.autoTakeInterval;
                    this.ruleForm.afterSaleInterval = res.afterSaleInterval;
                    this.ruleForm.isShow = res.isShow;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*----------------------------保存操作----------------------------*/
        //表单校验
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this._saveMallSettingInfo();
                } else {
                    return false;
                }
            });
        },
        //保存社区高级设置的信息
        _saveMallSettingInfo() {
            var id = JSON.parse(localStorage.getItem("userInfo")).id
                ? JSON.parse(localStorage.getItem("userInfo")).id
                : null;
            this.ruleForm.userId = id;
            saveMallSettingInfo(this.ruleForm)
                .then(res => {
                    this.$message.success("保存成功！");
                    this._queryMallSettingInfo();
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form-item {
    display: flex;
    align-items: center;
    color: #666;
}
.form-item-input {
    width: 60px;
    margin: 0 15px;
}
</style>